<template>
  <view :class="{'schedule-model-manage-container': !isLandscape}">
	<template v-if="!isLandscape">
		<!-- 页面标题 -->
		<view class="page-header">
		  <text class="page-title">赛程模式管理</text>
		  <text class="page-subtitle">管理赛程模型配置</text>
		</view>
		
		<!-- 操作栏 -->
		<view class="action-bar">
		  <button class="create-btn" @click="showCreateModal">创建模式</button>
		  <button class="room-model-btn" @click="goToRoomModel">房间模式管理</button>
		  <button class="settle-model-btn" @click="goToSettleModel">结算方式管理</button>
		</view>
		
		<!-- 模式列表 -->
		<view class="model-list-section">
		  <view v-if="loading" class="loading-container">
			<view class="loading-spinner"></view>
			<text>加载中...</text>
		  </view>
		  
		  <view v-else-if="modelList.length === 0" class="empty-state">
			<text>暂无赛程模式</text>
		  </view>
		  
		  <view v-else class="model-list">
			<view 
			  class="model-item" 
			  v-for="model in modelList" 
			  :key="model.id"
			>
			  <view class="model-header">
				<text class="model-id">ID: {{ model.id }}</text>
			  </view>
			  
			  <view class="model-content">
				<view class="model-row">
				  <text class="model-label">模式名称:</text>
				  <text class="model-value">{{ model.matchScheduleModelName || '未设置' }}</text>
				</view>
				<view class="model-row">
				  <text class="model-label">房间数量:</text>
				  <text class="model-value">{{ model.roomNum || '自动计算' }}</text>
				</view>
				<view class="model-row">
				  <text class="model-label">房间类型:</text>
				  <text class="model-value">{{ getRoomTypeText(model.roomType) }}</text>
				</view>
				<view class="model-row">
				  <text class="model-label">启动类型:</text>
				  <text class="model-value">{{ getStartTypeText(model.roomStartType) }}</text>
				</view>
				<view class="model-row">
				  <text class="model-label">参与模式:</text>
				  <text class="model-value">{{ getJoinModelText(model.roomJoinModel) }}</text>
				</view>
				<view class="model-row">
				  <text class="model-label">限制模式:</text>
				  <text class="model-value">{{ getLimitModelText(model.roomLimitModel) }}</text>
				</view>
				<view class="model-row">
				  <text class="model-label">获胜模式:</text>
				  <text class="model-value">{{ getWinModelText(model.matchWinModel) }}</text>
				</view>
				<view class="model-row">
				  <text class="model-label">报名模式:</text>
				  <text class="model-value">{{ getRegTypeText(model.matchRegType) }}</text>
				</view>
			  </view>
			  
			  <view class="model-actions">
				<button class="bind-btn" @click="openBindModal(model)">绑定房间</button>
				<button class="settle-btn" @click="openSettleModal(model)">绑定结算</button>
				<button class="edit-btn" @click="editModel(model)">编辑</button>
				<button class="delete-btn" @click="deleteModel(model)">删除</button>
			  </view>
			</view>
		  </view>
		</view>
     </template>
	 <!-- 横屏内容 -->
	 <LandscapePage 
	 v-else 
	 :form-items="formItems"
	 :data="modelList"
	 :loading="loading"
	 :setCurrentModelIndex="setCurrentModelIndex"
	 :currentModelIndex="currentModelIndex"
	 :formBtns="formBtns"
	 :buttons="buttons"
	 ></LandscapePage>
	<!-- 创建/编辑模态框 -->
    <view class="modal-overlay" v-if="showModal" @click="closeModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">{{ isEdit ? '编辑模式' : '创建模式' }}</text>
          <button class="close-btn" @click="closeModal">×</button>
        </view>
        
        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">模式名称</text>
            <input 
              class="form-input" 
              v-model="formData.matchScheduleModelName" 
              placeholder="请输入模式名称"
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">房间数量</text>
            <input 
              class="form-input" 
              v-model="formData.roomNum" 
              type="number"
              placeholder="0表示自动计算"
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">房间类型</text>
            <view class="form-picker" @click="openRoomTypePicker">
              <view class="picker-text">{{ roomTypeOptions[roomTypeIndex] }}</view>
              <view class="picker-arrow">▼</view>
            </view>
          </view>
          
          <view class="form-item" v-if="formData.roomType === 4 || formData.roomType === 5">
            <text class="form-label">房间类型N</text>
            <input 
              class="form-input" 
              v-model="formData.roomTypeN" 
              type="number"
              placeholder="请输入N值"
            />
          </view>
          
          <view class="form-item" v-if="formData.roomType === 5">
            <text class="form-label">房间类型M</text>
            <input 
              class="form-input" 
              v-model="formData.roomTypeM" 
              type="number"
              placeholder="请输入M值"
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">启动类型</text>
            <view class="form-picker" @click="openStartTypePicker">
              <view class="picker-text">{{ startTypeOptions[startTypeIndex] }}</view>
              <view class="picker-arrow">▼</view>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">参与模式</text>
            <view class="form-picker" @click="openJoinModelPicker">
              <view class="picker-text">{{ joinModelOptions[joinModelIndex] }}</view>
              <view class="picker-arrow">▼</view>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">限制模式</text>
            <view class="form-picker" @click="openLimitModelPicker">
              <view class="picker-text">{{ limitModelOptions[limitModelIndex] }}</view>
              <view class="picker-arrow">▼</view>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">获胜模式</text>
            <view class="form-picker" @click="openWinModelPicker">
              <view class="picker-text">{{ winModelOptions[winModelIndex] }}</view>
              <view class="picker-arrow">▼</view>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">报名模式</text>
            <view class="form-picker" @click="openRegTypePicker">
              <view class="picker-text">{{ regTypeOptions[regTypeIndex] }}</view>
              <view class="picker-arrow">▼</view>
            </view>
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="cancel-btn" @click="closeModal">取消</button>
          <button class="submit-btn" @click="submitForm" :disabled="submitting">
            {{ submitting ? '提交中...' : (isEdit ? '更新' : '创建') }}
          </button>
        </view>
      </view>
    </view>
    
    <!-- 房间模式绑定模态框 -->
    <view class="modal-overlay" v-if="showBindModal" @click="closeBindModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">绑定房间模式</text>
          <button class="close-btn" @click="closeBindModal">×</button>
        </view>
        
        <view class="modal-body">
          <view class="bind-info">
            <text class="bind-label">赛程模式: {{ currentScheduleModel?.id }}</text>
          </view>
          
          <view class="bind-section">
            <view class="section-header">
              <text class="section-title">已绑定的房间模式</text>
              <button class="add-btn" @click="openAddRoomModal">添加房间模式</button>
            </view>
            
            <view v-if="bindLoading" class="loading-container">
              <view class="loading-spinner"></view>
              <text>加载中...</text>
            </view>
            
            <view v-else-if="bindList.length === 0" class="empty-state">
              <text>暂未绑定房间模式</text>
            </view>
            
            <view v-else class="bind-list">
              <view 
                class="bind-item" 
                v-for="bind in bindList" 
                :key="bind.id"
              >
                <view class="bind-content">
                  <text class="room-id">房间模式: {{ bind.matchRoomModelId }}</text>
                  <text class="bind-time">绑定时间: {{ formatDate(bind.createTime) }}</text>
                </view>
                <button class="unbind-btn" @click="unbindRoom(bind)">解绑</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 添加房间模式模态框 -->
    <view class="modal-overlay" v-if="showAddRoomModal" @click="closeAddRoomModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">添加房间模式</text>
          <button class="close-btn" @click="closeAddRoomModal">×</button>
        </view>
        
        <view class="modal-body">
          <view v-if="roomLoading" class="loading-container">
            <view class="loading-spinner"></view>
            <text>加载中...</text>
          </view>
          
          <view v-else-if="roomList.length === 0" class="empty-state">
            <text>暂无可用房间模式</text>
          </view>
          
          <view v-else class="room-list">
            <view 
              class="room-item" 
              v-for="room in roomList" 
              :key="room.id"
              @click="selectRoom(room)"
              :class="{ 'selected': selectedRoomId === room.id }"
            >
              <view class="room-content">
                <text class="room-id">ID: {{ room.id }}</text>
                <text class="room-info">{{ room.startPoint }} → {{ room.endPoint }}</text>
                <text class="room-time">{{ formatTime(room.prepareTime) }} / {{ formatTime(room.limitTime) }}</text>
              </view>
              <view class="room-status" v-if="isRoomBound(room.id)">
                <text class="bound-tag">已绑定</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="cancel-btn" @click="closeAddRoomModal">取消</button>
          <button class="submit-btn" @click="bindRoom" :disabled="!selectedRoomId || binding">
            {{ binding ? '绑定中...' : '绑定' }}
          </button>
        </view>
      </view>
    </view>
    
    <!-- 房间类型选择模态框 -->
    <view class="modal-overlay" v-if="showRoomTypePicker" @click="closeRoomTypePicker">
      <view class="picker-modal-content" @click.stop>
        <view class="picker-modal-header">
          <text class="picker-modal-title">选择房间类型</text>
          <button class="close-btn" @click="closeRoomTypePicker">×</button>
        </view>
        <view class="picker-modal-body">
          <view 
            class="picker-option" 
            v-for="(option, index) in roomTypeOptions" 
            :key="index"
            @click="selectRoomType(index)"
            :class="{ 'selected': roomTypeIndex === index }"
          >
            <text class="option-text">{{ option }}</text>
            <view class="option-check" v-if="roomTypeIndex === index">✓</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 启动类型选择模态框 -->
    <view class="modal-overlay" v-if="showStartTypePicker" @click="closeStartTypePicker">
      <view class="picker-modal-content" @click.stop>
        <view class="picker-modal-header">
          <text class="picker-modal-title">选择启动类型</text>
          <button class="close-btn" @click="closeStartTypePicker">×</button>
        </view>
        <view class="picker-modal-body">
          <view 
            class="picker-option" 
            v-for="(option, index) in startTypeOptions" 
            :key="index"
            @click="selectStartType(index)"
            :class="{ 'selected': startTypeIndex === index }"
          >
            <text class="option-text">{{ option }}</text>
            <view class="option-check" v-if="startTypeIndex === index">✓</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 参与模式选择模态框 -->
    <view class="modal-overlay" v-if="showJoinModelPicker" @click="closeJoinModelPicker">
      <view class="picker-modal-content" @click.stop>
        <view class="picker-modal-header">
          <text class="picker-modal-title">选择参与模式</text>
          <button class="close-btn" @click="closeJoinModelPicker">×</button>
        </view>
        <view class="picker-modal-body">
          <view 
            class="picker-option" 
            v-for="(option, index) in joinModelOptions" 
            :key="index"
            @click="selectJoinModel(index)"
            :class="{ 'selected': joinModelIndex === index }"
          >
            <text class="option-text">{{ option }}</text>
            <view class="option-check" v-if="joinModelIndex === index">✓</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 限制模式选择模态框 -->
    <view class="modal-overlay" v-if="showLimitModelPicker" @click="closeLimitModelPicker">
      <view class="picker-modal-content" @click.stop>
        <view class="picker-modal-header">
          <text class="picker-modal-title">选择限制模式</text>
          <button class="close-btn" @click="closeLimitModelPicker">×</button>
        </view>
        <view class="picker-modal-body">
          <view 
            class="picker-option" 
            v-for="(option, index) in limitModelOptions" 
            :key="index"
            @click="selectLimitModel(index)"
            :class="{ 'selected': limitModelIndex === index }"
          >
            <text class="option-text">{{ option }}</text>
            <view class="option-check" v-if="limitModelIndex === index">✓</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 获胜模式选择模态框 -->
    <view class="modal-overlay" v-if="showWinModelPicker" @click="closeWinModelPicker">
      <view class="picker-modal-content" @click.stop>
        <view class="picker-modal-header">
          <text class="picker-modal-title">选择获胜模式</text>
          <button class="close-btn" @click="closeWinModelPicker">×</button>
        </view>
        <view class="picker-modal-body">
          <view 
            class="picker-option" 
            v-for="(option, index) in winModelOptions" 
            :key="index"
            @click="selectWinModel(index)"
            :class="{ 'selected': winModelIndex === index }"
          >
            <text class="option-text">{{ option }}</text>
            <view class="option-check" v-if="winModelIndex === index">✓</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 报名模式选择模态框 -->
    <view class="modal-overlay" v-if="showRegTypePicker" @click="closeRegTypePicker">
      <view class="picker-modal-content" @click.stop>
        <view class="picker-modal-header">
          <text class="picker-modal-title">选择报名模式</text>
          <button class="close-btn" @click="closeRegTypePicker">×</button>
        </view>
        <view class="picker-modal-body">
          <view 
            class="picker-option" 
            v-for="(option, index) in regTypeOptions" 
            :key="index"
            @click="selectRegType(index)"
            :class="{ 'selected': regTypeIndex === index }"
          >
            <text class="option-text">{{ option }}</text>
            <view class="option-check" v-if="regTypeIndex === index">✓</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 结算方式绑定模态框 -->
    <view class="modal-overlay" v-if="showSettleModal" @click="closeSettleModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">绑定结算方式</text>
          <button class="close-btn" @click="closeSettleModal">×</button>
        </view>
        
        <view class="modal-body">
          <view class="bind-info">
            <text class="bind-label">赛程模式: {{ currentScheduleModel?.id }}</text>
          </view>
          
          <view class="bind-section">
            <view class="section-header">
              <text class="section-title">已绑定的结算方式</text>
              <button class="add-btn" @click="openAddSettleModal">添加结算方式</button>
            </view>
            
            <view v-if="settleBindLoading" class="loading-container">
              <view class="loading-spinner"></view>
              <text>加载中...</text>
            </view>
            
            <view v-else-if="settleBindList.length === 0" class="empty-state">
              <text>暂未绑定结算方式</text>
            </view>
            
            <view v-else class="bind-list">
              <view 
                class="bind-item" 
                v-for="bind in settleBindList" 
                :key="bind.id"
              >
                <view class="bind-content">
                  <text class="settle-id">结算方式: {{ bind.matchScheduleSettleId }}</text>
                  <text class="settle-type">结算类型: {{ getSettleTypeText(bind.settleType) }}</text>
                  <text class="bind-time">绑定时间: {{ formatDate(bind.createTime) }}</text>
                </view>
                <button class="unbind-btn" @click="unbindSettle(bind)">解绑</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 添加结算方式模态框 -->
    <view class="modal-overlay" v-if="showAddSettleModal" @click="closeAddSettleModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">添加结算方式</text>
          <button class="close-btn" @click="closeAddSettleModal">×</button>
        </view>
        
        <view class="modal-body">
          <view v-if="settleLoading" class="loading-container">
            <view class="loading-spinner"></view>
            <text>加载中...</text>
          </view>
          
          <view v-else-if="settleList.length === 0" class="empty-state">
            <text>暂无可用结算方式</text>
          </view>
          
          <view v-else class="settle-list">
            <view 
              class="settle-item" 
              v-for="settle in settleList" 
              :key="settle.id"
              @click="selectSettle(settle)"
              :class="{ 'selected': selectedSettleId === settle.id }"
            >
              <view class="settle-content">
                <text class="settle-id">ID: {{ settle.id }}</text>
                <text class="settle-name">{{ settle.settleName || '未命名' }}</text>
                <text class="settle-type">{{ getSettleTypeText(settle.settleType) }}</text>
                <text class="settle-desc">{{ settle.settleDesc || '无描述' }}</text>
              </view>
              <view class="settle-status" v-if="isSettleBound(settle.id)">
                <text class="bound-tag">已绑定</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="cancel-btn" @click="closeAddSettleModal">取消</button>
          <button class="submit-btn" @click="bindSettle" :disabled="!selectedSettleId || settleBinding">
            {{ settleBinding ? '绑定中...' : '绑定' }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { MatchScheduleModelAPI, MatchRoomModelAPI, MatchScheduleModelRefAPI, MatchScheduleModelSettleRefAPI, MatchScheduleSettleAPI } from '@/api/battle.js'
import useIsLandscape from '@/composables/useIsLandscape.js'
import LandscapePage from '@/views/landscape/schedule-model-manage.vue'

const { isLandscape } = useIsLandscape()

// 响应式数据
const loading = ref(false)
const submitting = ref(false)
const showModal = ref(false)
const isEdit = ref(false)
const searchKeyword = ref('')
const modelList = ref([])

// 房间模式绑定相关数据
const showBindModal = ref(false)
const showAddRoomModal = ref(false)
const bindLoading = ref(false)
const roomLoading = ref(false)
const binding = ref(false)
const currentScheduleModel = ref(null)
const bindList = ref([])
const roomList = ref([])
const selectedRoomId = ref('')

// 结算方式绑定相关数据
const showSettleModal = ref(false)
const showAddSettleModal = ref(false)
const settleBindLoading = ref(false)
const settleLoading = ref(false)
const settleBinding = ref(false)
const settleBindList = ref([])
const settleList = ref([])
const selectedSettleId = ref('')

// 选择器相关数据
const showRoomTypePicker = ref(false)
const showStartTypePicker = ref(false)
const showJoinModelPicker = ref(false)
const showLimitModelPicker = ref(false)
const showWinModelPicker = ref(false)
const showRegTypePicker = ref(false)

// 表单数据
const formData = ref({
  matchScheduleModelName: '',
  matchScheduleModelId: '',
  roomNum: 0,
  roomType: 2,
  roomTypeN: 0,
  roomTypeM: 0,
  roomStartType: 1,
  roomCreateModel: 0,
  roomJoinModel: 1,
  roomLimitModel: 0,
  matchModel: 0,
  matchRegType: 0,
  matchWinModel: 3
})

// 选择器索引
const roomTypeIndex = ref(2)
const startTypeIndex = ref(1)
const joinModelIndex = ref(1)
const limitModelIndex = ref(0)
const winModelIndex = ref(2)
const regTypeIndex = ref(0)

// 选项数据
const roomTypeOptions = [
  'N对N 2组', '单人 1组', '1对1 2组', '2对2 2组', '单人多组 N组', '多人多组 N组'
]
const startTypeOptions = ['定时开赛', '手动开赛', '人满即开']
const joinModelOptions = ['主动进入', '随机', '参考房间限制模式', '等级水平']
const limitModelOptions = ['无限制', '水平 1-2之间', '水平 2-3之间']
const winModelOptions = [
  '一回合 抢1分', '三回合 抢2分', '五回合 抢3分', '高分', 'BO3', 
  'AO5', 'BAO5', '时间短', '步数短', '距离长', '五局（抢3） 五回合（抢3）'
]
const regTypeOptions = ['先报名', '预报名', '后报名', '自定义']

// 结算类型选项
const settleTypeOptions = ['普通结算', '积分结算', '排名结算', '自定义结算']

// 获取选项文本
const getRoomTypeText = (type) => roomTypeOptions[type] || '未知'
const getStartTypeText = (type) => startTypeOptions[type] || '未知'
const getJoinModelText = (type) => joinModelOptions[type] || '未知'
const getLimitModelText = (type) => limitModelOptions[type] || '未知'
const getWinModelText = (type) => winModelOptions[type - 1] || '未知'
const getRegTypeText = (type) => regTypeOptions[type] || '未知'
const getSettleTypeText = (type) => settleTypeOptions[type] || '未知'


// 加载模式列表
const loadModelList = async () => {
  loading.value = true
  try {
    const result = await MatchScheduleModelAPI.page({
      pageNum: 0,
      pageSize: 100
    })
    
    if (result.code === 0 && result.data) {
      modelList.value = result.data.list || result.data || []
    } else {
      modelList.value = []
      throw new Error(result.msg || '获取模式列表失败')
    }
  } catch (error) {
    console.error('获取模式列表失败:', error)
    uni.showToast({
      title: error.message || '获取模式列表失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 搜索功能
const onSearch = () => {
  // 这里可以实现本地搜索或重新请求API
  console.log('搜索关键词:', searchKeyword.value)
}

// 跳转到房间模式管理页面
const goToRoomModel = () => {
  uni.navigateTo({
    url: '/views/room-model-manage'
  })
}

// 跳转到结算方式管理页面
const goToSettleModel = () => {
  uni.navigateTo({
    url: '/views/schedule-settle-manage'
  })
}

// 显示创建模态框
const showCreateModal = () => {
  isEdit.value = false
  resetForm()
  showModal.value = true
}

// 编辑模式
const editModel = (model) => {
  console.log('开始编辑模式:', model)
  
  isEdit.value = true
  formData.value = { ...model }
  
  // 确保matchScheduleModelId字段正确设置
  if (model.id && !model.matchScheduleModelId) {
    formData.value.matchScheduleModelId = model.id
  }
  
  console.log('编辑模式表单数据:', formData.value)
  
  // 设置选择器索引
  roomTypeIndex.value = model.roomType || 2
  startTypeIndex.value = model.roomStartType || 1
  joinModelIndex.value = model.roomJoinModel || 1
  limitModelIndex.value = model.roomLimitModel || 0
  winModelIndex.value = (model.matchWinModel || 3) - 1
  regTypeIndex.value = model.matchRegType || 0
  
  showModal.value = true
}

// 删除模式
const deleteModel = async (model) => {
  uni.showModal({
    title: '确认删除',
    content: `确定要删除模式 ${model.id} 吗？`,
    success: async (res) => {
      if (res.confirm) {
        try {
          const result = await MatchScheduleModelAPI.remove({
            matchScheduleModelId: model.id
          })
          
          if (result.code === 0) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
            loadModelList()
          } else {
            throw new Error(result.msg || '删除失败')
          }
        } catch (error) {
          console.error('删除模式失败:', error)
          uni.showToast({
            title: error.message || '删除失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 关闭模态框
const closeModal = () => {
  showModal.value = false
  resetForm()
}

// 重置表单
const resetForm = () => {
  formData.value = {
    matchScheduleModelName: '',
    matchScheduleModelId: '',
    roomNum: 0,
    roomType: 2,
    roomTypeN: 0,
    roomTypeM: 0,
    roomStartType: 1,
    roomCreateModel: 0,
    roomJoinModel: 1,
    roomLimitModel: 0,
    matchModel: 0,
    matchRegType: 0,
    matchWinModel: 3
  }
  
  roomTypeIndex.value = 2
  startTypeIndex.value = 1
  joinModelIndex.value = 1
  limitModelIndex.value = 0
  winModelIndex.value = 2
  regTypeIndex.value = 0
}

// 选择器打开和关闭函数
const openRoomTypePicker = () => {
  showRoomTypePicker.value = true
}

const closeRoomTypePicker = () => {
  showRoomTypePicker.value = false
}

const selectRoomType = (index) => {
  roomTypeIndex.value = index
  formData.value.roomType = index
  closeRoomTypePicker()
}

const openStartTypePicker = () => {
  showStartTypePicker.value = true
}

const closeStartTypePicker = () => {
  showStartTypePicker.value = false
}

const selectStartType = (index) => {
  startTypeIndex.value = index
  formData.value.roomStartType = index
  closeStartTypePicker()
}

const openJoinModelPicker = () => {
  showJoinModelPicker.value = true
}

const closeJoinModelPicker = () => {
  showJoinModelPicker.value = false
}

const selectJoinModel = (index) => {
  joinModelIndex.value = index
  formData.value.roomJoinModel = index
  closeJoinModelPicker()
}

const openLimitModelPicker = () => {
  showLimitModelPicker.value = true
}

const closeLimitModelPicker = () => {
  showLimitModelPicker.value = false
}

const selectLimitModel = (index) => {
  limitModelIndex.value = index
  formData.value.roomLimitModel = index
  closeLimitModelPicker()
}

const openWinModelPicker = () => {
  showWinModelPicker.value = true
}

const closeWinModelPicker = () => {
  showWinModelPicker.value = false
}

const selectWinModel = (index) => {
  winModelIndex.value = index
  formData.value.matchWinModel = index + 1
  closeWinModelPicker()
}

const openRegTypePicker = () => {
  showRegTypePicker.value = true
}

const closeRegTypePicker = () => {
  showRegTypePicker.value = false
}

const selectRegType = (index) => {
  regTypeIndex.value = index
  formData.value.matchRegType = index
  closeRegTypePicker()
}

// 提交表单
const submitForm = async () => {
  // 表单验证
  if (formData.value.roomType === 4 || formData.value.roomType === 5) {
    if (!formData.value.roomTypeN || formData.value.roomTypeN <= 0) {
      uni.showToast({
        title: '请输入有效的房间类型N值',
        icon: 'none'
      })
      return
    }
  }
  
  if (formData.value.roomType === 5) {
    if (!formData.value.roomTypeM || formData.value.roomTypeM <= 0) {
      uni.showToast({
        title: '请输入有效的房间类型M值',
        icon: 'none'
      })
      return
    }
  }
  
  submitting.value = true
  try {
    const api = isEdit.value ? MatchScheduleModelAPI.edit : MatchScheduleModelAPI.create
    
    // 构建提交数据
    const submitData = { ...formData.value }
    
    // 如果是编辑模式，确保matchScheduleModelId字段正确设置
    if (isEdit.value) {
      // 确保matchScheduleModelId字段存在，优先使用id字段
      submitData.matchScheduleModelId = formData.value.matchScheduleModelId || formData.value.id
      console.log('编辑模式，设置matchScheduleModelId:', submitData.matchScheduleModelId)
    }
    
    console.log('提交的数据:', submitData)
    console.log('是否为编辑模式:', isEdit.value)
    
    const result = await api(submitData)
    
    if (result.code === 0) {
      uni.showToast({
        title: isEdit.value ? '更新成功' : '创建成功',
        icon: 'success'
      })
      closeModal()
      loadModelList()
    } else {
      throw new Error(result.msg || (isEdit.value ? '更新失败' : '创建失败'))
    }
  } catch (error) {
    console.error('提交表单失败:', error)
    uni.showToast({
      title: error.message || (isEdit.value ? '更新失败' : '创建失败'),
      icon: 'none'
    })
  } finally {
    submitting.value = false
  }
}

// 显示绑定模态框
const openBindModal = (model) => {
  currentScheduleModel.value = model
  showBindModal.value = true
  loadBindList()
}

// 关闭绑定模态框
const closeBindModal = () => {
  showBindModal.value = false
  currentScheduleModel.value = null
  bindList.value = []
}

// 加载绑定列表
const loadBindList = async () => {
  if (!currentScheduleModel.value) return
  
  bindLoading.value = true
  try {
    const result = await MatchScheduleModelRefAPI.page({
      matchScheduleModelId: currentScheduleModel.value.id,
      pageNum: 0,
      pageSize: 100
    })
    
    if (result.code === 0 && result.data) {
      bindList.value = result.data.list || result.data || []
    } else {
      bindList.value = []
      throw new Error(result.msg || '获取绑定列表失败')
    }
  } catch (error) {
    console.error('获取绑定列表失败:', error)
    uni.showToast({
      title: error.message || '获取绑定列表失败',
      icon: 'none'
    })
  } finally {
    bindLoading.value = false
  }
}

// 显示添加房间模态框
const openAddRoomModal = () => {
  showAddRoomModal.value = true
  selectedRoomId.value = ''
  loadRoomList()
}

// 关闭添加房间模态框
const closeAddRoomModal = () => {
  showAddRoomModal.value = false
  selectedRoomId.value = ''
  roomList.value = []
}

// 加载房间模式列表
const loadRoomList = async () => {
  roomLoading.value = true
  setCurrentModelIndex(0)
  try {
    const result = await MatchRoomModelAPI.page({
      pageNum: 0,
      pageSize: 100
    })
    
    if (result.code === 0 && result.data) {
      roomList.value = result.data.list || result.data || []
    } else {
      roomList.value = []
      throw new Error(result.msg || '获取房间模式列表失败')
    }
  } catch (error) {
    console.error('获取房间模式列表失败:', error)
    uni.showToast({
      title: error.message || '获取房间模式列表失败',
      icon: 'none'
    })
  } finally {
    roomLoading.value = false
  }
}

// 选择房间模式
const selectRoom = (room) => {
  if (!isRoomBound(room.id)) {
    selectedRoomId.value = room.id
  }
}

// 检查房间模式是否已绑定
const isRoomBound = (roomId) => {
  return bindList.value.some(bind => bind.matchRoomModelId === roomId)
}

// 绑定房间模式
const bindRoom = async () => {
  if (!selectedRoomId.value || !currentScheduleModel.value) return
  
  binding.value = true
  try {
    const result = await MatchScheduleModelRefAPI.create({
      matchScheduleModelId: currentScheduleModel.value.id,
      matchRoomModelId: selectedRoomId.value
    })
    
    if (result.code === 0) {
      uni.showToast({
        title: '绑定成功',
        icon: 'success'
      })
      closeAddRoomModal()
      loadBindList()
    } else {
      throw new Error(result.msg || '绑定失败')
    }
  } catch (error) {
    console.error('绑定房间模式失败:', error)
    uni.showToast({
      title: error.message || '绑定失败',
      icon: 'none'
    })
  } finally {
    binding.value = false
  }
}

// 解绑房间模式
const unbindRoom = async (bind) => {
  uni.showModal({
    title: '确认解绑',
    content: `确定要解绑房间模式 ${bind.matchRoomModelId} 吗？`,
    success: async (res) => {
      if (res.confirm) {
        try {
          const result = await MatchScheduleModelRefAPI.remove({
            matchScheduleModelRefId: bind.id
          })
          
          if (result.code === 0) {
            uni.showToast({
              title: '解绑成功',
              icon: 'success'
            })
            loadBindList()
          } else {
            throw new Error(result.msg || '解绑失败')
          }
        } catch (error) {
          console.error('解绑房间模式失败:', error)
          uni.showToast({
            title: error.message || '解绑失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 结算方式绑定相关函数
// 显示结算方式绑定模态框
const openSettleModal = (model) => {
  currentScheduleModel.value = model
  showSettleModal.value = true
  loadSettleBindList()
}

// 关闭结算方式绑定模态框
const closeSettleModal = () => {
  showSettleModal.value = false
  currentScheduleModel.value = null
  settleBindList.value = []
}

// 加载结算方式绑定列表
const loadSettleBindList = async () => {
  if (!currentScheduleModel.value) return
  
  settleBindLoading.value = true
  try {
    const result = await MatchScheduleModelSettleRefAPI.page({
      matchScheduleModelId: currentScheduleModel.value.id,
      pageNum: 0,
      pageSize: 100
    })
    
    if (result.code === 0 && result.data) {
      settleBindList.value = result.data.list || result.data || []
    } else {
      settleBindList.value = []
      throw new Error(result.msg || '获取结算方式绑定列表失败')
    }
  } catch (error) {
    console.error('获取结算方式绑定列表失败:', error)
    uni.showToast({
      title: error.message || '获取结算方式绑定列表失败',
      icon: 'none'
    })
  } finally {
    settleBindLoading.value = false
  }
}

// 显示添加结算方式模态框
const openAddSettleModal = () => {
  showAddSettleModal.value = true
  selectedSettleId.value = ''
  loadSettleList()
}

// 关闭添加结算方式模态框
const closeAddSettleModal = () => {
  showAddSettleModal.value = false
  selectedSettleId.value = ''
  settleList.value = []
}

// 加载结算方式列表
const loadSettleList = async () => {
  settleLoading.value = true
  try {
    const result = await MatchScheduleSettleAPI.page({
      pageNum: 0,
      pageSize: 100
    })
    
    if (result.code === 0 && result.data) {
      settleList.value = result.data.list || result.data || []
    } else {
      settleList.value = []
      throw new Error(result.msg || '获取结算方式列表失败')
    }
  } catch (error) {
    console.error('获取结算方式列表失败:', error)
    uni.showToast({
      title: error.message || '获取结算方式列表失败',
      icon: 'none'
    })
  } finally {
    settleLoading.value = false
  }
}

// 选择结算方式
const selectSettle = (settle) => {
  if (!isSettleBound(settle.id)) {
    selectedSettleId.value = settle.id
  }
}

// 检查结算方式是否已绑定
const isSettleBound = (settleId) => {
  return settleBindList.value.some(bind => bind.matchScheduleSettleId === settleId)
}

// 绑定结算方式
const bindSettle = async () => {
  if (!selectedSettleId.value || !currentScheduleModel.value) return
  
  settleBinding.value = true
  try {
    const selectedSettle = settleList.value.find(settle => settle.id === selectedSettleId.value)
    if (!selectedSettle) {
      throw new Error('未找到选中的结算方式')
    }
    
    const result = await MatchScheduleModelSettleRefAPI.create({
      matchScheduleModelId: currentScheduleModel.value.id,
      matchScheduleSettleId: selectedSettleId.value,
      settleType: selectedSettle.settleType || 0
    })
    
    if (result.code === 0) {
      uni.showToast({
        title: '绑定成功',
        icon: 'success'
      })
      closeAddSettleModal()
      loadSettleBindList()
    } else {
      throw new Error(result.msg || '绑定失败')
    }
  } catch (error) {
    console.error('绑定结算方式失败:', error)
    uni.showToast({
      title: error.message || '绑定失败',
      icon: 'none'
    })
  } finally {
    settleBinding.value = false
  }
}

// 解绑结算方式
const unbindSettle = async (bind) => {
  uni.showModal({
    title: '确认解绑',
    content: `确定要解绑结算方式 ${bind.matchScheduleSettleId} 吗？`,
    success: async (res) => {
      if (res.confirm) {
        try {
          const result = await MatchScheduleModelSettleRefAPI.remove({
            matchScheduleModelSettleRefId: bind.id
          })
          
          if (result.code === 0) {
            uni.showToast({
              title: '解绑成功',
              icon: 'success'
            })
            loadSettleBindList()
          } else {
            throw new Error(result.msg || '解绑失败')
          }
        } catch (error) {
          console.error('解绑结算方式失败:', error)
          uni.showToast({
            title: error.message || '解绑失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 格式化时间显示
const formatTime = (milliseconds) => {
  if (!milliseconds) return '未设置'
  const seconds = Math.floor(milliseconds / 1000)
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  
  if (minutes > 0) {
    return `${minutes}分${remainingSeconds}秒`
  } else {
    return `${remainingSeconds}秒`
  }
}

// 格式化日期显示
const formatDate = (timestamp) => {
  if (!timestamp) return '未知'
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN')
}

// 页面加载时获取数据
onMounted(() => {
  loadModelList()
})

// 横屏时传入的表单数据
const formItems = computed(() => [
	{
		label: '模式ID',
		key: 'id'
	},
	{
		label: '模式名称',
		key: 'matchScheduleModelName',
		format(val) {
			return val || '未设置'
		}
	},
	{
		label: '房间数量',
		key: 'roomNum',
		format(val) {
			return val || '自动计算'
		}
	},
	{
		label: '房间类型',
		key: 'roomType',
		format(val) {
			return getRoomTypeText(val)
		}
	},
	{
		label: '启动类型',
		key: 'roomStartType',
		format(val) {
			return getStartTypeText(val)
		}
	},
	{
		label: '参与模式',
		key: 'roomJoinModel',
		format(val) {
			return getJoinModelText(val)
		}
	},
	{
		label: '限制模式',
		key: 'roomLimitModel',
		format(val) {
			return getLimitModelText(val)
		}
	},
	{
		label: '获胜模式',
		key: 'matchWinModel',
		format(val) {
			return getWinModelText(val)
		}
	},
	{
		label: '报名模式',
		key: 'matchRegType',
		format(val) {
			return getRegTypeText(val)
		}
	}
])

const formBtns = [
	{
		text: '绑定房间',
		icon: '/src/static/btn_green.png',
		color: '#005918',
		click() {
			openBindModal(modelList.value[currentModelIndex.value])
		}
	},
	{
		text: '绑定结算',
		icon: '/src/static/btn_yellow.png',
		color: '#9B3B18',
		click() {
			openSettleModal(modelList.value[currentModelIndex.value])
		}
	},
	{
		text: '编辑',
		icon: '/src/static/btn_blue.png',
		color: '#FFFFFF',
		click() {
			editModel(modelList.value[currentModelIndex.value])
		}
	},
	{
		text: '删除',
		icon: '/src/static/btn_red.png',
		color: '#FFFFFF',
		click() {
			deleteModel(modelList.value[currentModelIndex.value])
		}
	}
]

const buttons = [
	{
		text: '创建模式',
		icon: '/static/view1.png',
		click: showCreateModal
	},
	{
		text: '房间模式管理',
		icon: '/static/room.png',
		click: goToRoomModel
	},
	{
		text: '结算方式管理',
		icon: '/static/settlement.png',
		click: goToSettleModel
	}
]



// 当前模式的索引
const currentModelIndex = ref(0)
const setCurrentModelIndex = (index) => currentModelIndex.value = index

</script>

<style lang="scss" scoped>
.schedule-model-manage-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx;
  box-sizing: border-box;
}

.page-header {
  text-align: center;
  margin-bottom: 60rpx;
  
  .page-title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  }
  
  .page-subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
  flex-wrap: wrap;
  gap: 15rpx;
  
  .create-btn, .room-model-btn, .settle-model-btn {
    height: 60rpx;
    padding: 0 25rpx;
    border: none;
    border-radius: 12rpx;
    color: #fff;
    font-size: 24rpx;
    font-weight: bold;
    white-space: nowrap;
  }
  
  .create-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  }
  
  .room-model-btn {
    background: linear-gradient(135deg, #fd7e14 0%, #ff8c00 100%);
  }
  
  .settle-model-btn {
    background: linear-gradient(135deg, #6c757d 0%, #6a757d 100%);
  }
  
  .search-box {
    flex: 1;
    min-width: 200rpx;
    
    .search-input {
      width: 100%;
      height: 60rpx;
      background: rgba(255, 255, 255, 0.9);
      border: none;
      border-radius: 12rpx;
      padding: 0 20rpx;
      font-size: 26rpx;
    }
  }
}

.model-list-section {
  .loading-container, .empty-state {
    text-align: center;
    color: #fff;
    padding: 50rpx;
  }
  
  .model-list {
    .model-item {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
      
      .model-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        
        .model-id {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
        }
      }
      
      .model-content {
        .model-row {
          display: flex;
          margin-bottom: 10rpx;
          font-size: 26rpx;
          
          .model-label {
            width: 160rpx;
            color: #666;
          }
          
          .model-value {
            flex: 1;
            color: #333;
          }
        }
      }
      
      .model-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;
        padding-top: 20rpx;
        border-top: 2rpx solid #eee;
        
        .bind-btn, .settle-btn, .edit-btn, .delete-btn {
          flex: 1;
          height: 60rpx;
          padding: 0 15rpx;
          border: none;
          border-radius: 8rpx;
          font-size: 24rpx;
          margin: 0 5rpx;
          
          &.bind-btn {
            background: #007bff;
            color: #fff;
          }
          
          &.settle-btn {
            background: #28a745;
            color: #fff;
          }
          
          &.edit-btn {
            background: #ffc107;
            color: #333;
          }
          
          &.delete-btn {
            background: #dc3545;
            color: #fff;
          }
        }
      }
    }
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  
  .modal-content {
    width: 90%;
    max-height: 80%;
    background: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #eee;
      
      .modal-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .close-btn {
        width: 60rpx;
        height: 60rpx;
        border: none;
        background: none;
        font-size: 40rpx;
        color: #999;
		line-height: 60rpx;
		margin: 0;
      }
    }
    
    .modal-body {
      padding: 30rpx;
      max-height: 60vh;
      overflow-y: auto;
      
      .form-item {
        margin-bottom: 30rpx;
        
        .form-label {
          display: block;
          font-size: 28rpx;
          color: #333;
          margin-bottom: 15rpx;
          font-weight: bold;
        }
        
        .form-input {
          width: 100%;
          height: 80rpx;
          border: 2rpx solid #eee;
          border-radius: 12rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          background: #fff;
          box-sizing: border-box;
        }
        
        .form-picker {
          width: 100%;
          height: 80rpx;
          border: 2rpx solid #eee;
          border-radius: 12rpx;
          padding: 0 20rpx;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          
          .picker-text {
            font-size: 28rpx;
            color: #333;
          }
          
          .picker-arrow {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
    
    .modal-footer {
      display: flex;
      gap: 20rpx;
      padding: 30rpx;
      border-top: 2rpx solid #eee;
      
      .cancel-btn, .submit-btn {
        flex: 1;
        height: 80rpx;
        border: none;
        border-radius: 12rpx;
        font-size: 28rpx;
        font-weight: bold;
        
        &.cancel-btn {
          background: #f8f9fa;
          color: #666;
          border: 2rpx solid #eee;
        }
        
        &.submit-btn {
          background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
          color: #fff;
          
          &:disabled {
            opacity: 0.6;
          }
        }
      }
    }
  }
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 房间模式绑定相关样式
.bind-info {
  margin-bottom: 30rpx;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  
  .bind-label {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }
}

.bind-section {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
    }
    
    .add-btn {
      height: 50rpx;
      padding: 0 20rpx;
      background: #28a745;
      border: none;
      border-radius: 8rpx;
      color: #fff;
      font-size: 24rpx;
    }
  }
  
  .bind-list {
    .bind-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      margin-bottom: 15rpx;
      
      .bind-content {
        flex: 1;
        
        .room-id {
          display: block;
          font-size: 26rpx;
          color: #333;
          margin-bottom: 5rpx;
        }
        
        .bind-time {
          font-size: 24rpx;
          color: #666;
        }
      }
      
      .unbind-btn {
        height: 50rpx;
        padding: 0 20rpx;
        background: #dc3545;
        border: none;
        border-radius: 8rpx;
        color: #fff;
        font-size: 24rpx;
      }
    }
  }
}

.room-list {
  .room-item {
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    margin-bottom: 15rpx;
    border: 2rpx solid transparent;
    position: relative;
    
    &.selected {
      border-color: #007bff;
      background: #e3f2fd;
    }
    
    .room-content {
      .room-id {
        display: block;
        font-size: 26rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 5rpx;
      }
      
      .room-info {
        display: block;
        font-size: 24rpx;
        color: #666;
        margin-bottom: 5rpx;
      }
      
      .room-time {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .room-status {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      
      .bound-tag {
        background: #6c757d;
        color: #fff;
        padding: 4rpx 8rpx;
        border-radius: 6rpx;
        font-size: 20rpx;
      }
    }
  }
}

// 结算方式绑定相关样式
.settle-list {
  .settle-item {
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    margin-bottom: 15rpx;
    border: 2rpx solid transparent;
    position: relative;
    
    &.selected {
      border-color: #28a745;
      background: #d4edda;
    }
    
    .settle-content {
      .settle-id {
        display: block;
        font-size: 26rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 5rpx;
      }
      
      .settle-name {
        display: block;
        font-size: 24rpx;
        color: #28a745;
        margin-bottom: 5rpx;
      }
      
      .settle-type {
        display: block;
        font-size: 24rpx;
        color: #666;
        margin-bottom: 5rpx;
      }
      
      .settle-desc {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .settle-status {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      
      .bound-tag {
        background: #6c757d;
        color: #fff;
        padding: 4rpx 8rpx;
        border-radius: 6rpx;
        font-size: 20rpx;
      }
    }
  }
}

// 结算方式绑定列表样式
.bind-list {
  .bind-item {
    .bind-content {
      .settle-id {
        display: block;
        font-size: 26rpx;
        color: #333;
        margin-bottom: 5rpx;
      }
      
      .settle-type {
        display: block;
        font-size: 24rpx;
        color: #28a745;
        margin-bottom: 5rpx;
      }
      
      .bind-time {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

// 选择器模态框通用样式
.picker-modal-content {
  width: 90%;
  max-height: 80%;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  
  .picker-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 2rpx solid #eee;
    
    .picker-modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .close-btn {
      width: 60rpx;
      height: 60rpx;
      border: none;
      background: none;
      font-size: 40rpx;
      color: #999;
    }
  }
  
  .picker-modal-body {
    padding: 30rpx;
    max-height: 60vh;
    overflow-y: auto;
    
    .picker-option {
      padding: 20rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      margin-bottom: 15rpx;
      border: 2rpx solid transparent;
      position: relative;
      cursor: pointer;
      
      &.selected {
        border-color: #007bff;
        background: #e3f2fd;
      }
      
      .option-text {
        font-size: 28rpx;
        color: #333;
      }
      
      .option-check {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        font-size: 24rpx;
        color: #007bff;
        font-weight: bold;
      }
    }
  }
}

@media screen and (orientation: landscape) {
	.modal-overlay {
		.modal-content {
			display: flex;
			max-height: 90%;
			flex-direction: column;
			.modal-header {
				padding: 10rpx;
			}
			.modal-body {
				box-sizing: border-box;
				padding: 10rpx;
			}
			.modal-footer {
				padding: 10rpx;
				.cancel-btn, .submit-btn {
					height: 60rpx;
					line-height: 60rpx;
				}
			}
		}
	}
}
</style> 